<template>
  <div class="testApp">
    <div class=" flex-between head">会议总计 <div class="right">会议数量</div></div>
    <div id="myChart"></div>
  </div>
</template>

<script>
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {

  data () {
    return {
      labelPosition: 'top',
      option: null,
      myChartOne: null
      // xData: [],
      // yData: []
    }
  },
  computed: {
    xData () {
      return this.$store.state.dataPlatform.xData
    },
    yData () {
      return this.$store.state.dataPlatform.yData
    }
  },
  mounted () {
    // // console.log(this.xData, this.yData)
    this.loadLine()
  },
  created () {
    this.$store.dispatch('dataPlatform/getChartData', {}).then(res => {
      if (res.code === 200) {
        // console.log(res.data)
        // const xData=[]
      }
    }).catch(err => {
      this.$message({
        type: 'error',
        message: err,
        duration: 1000
      })
    })
  },
  watch: {
    yData (newVal, oldVal) {
      if (oldVal) {
        this.loadLine()
      }
    },
    xData (newVal, oldVal) {
      if (oldVal) {
        this.loadLine()
      }
    }
  },
  methods: {
    loadLine () {
      this.myChartOne = this.$echarts.init(document.getElementById('myChart'))
      this.option = {
        tooltip: {
          trigger: 'axis',
          formatter: () => {
            return ''
          },
          // position: function (point, params, dom, rect, size) {
          //   // 固定在顶部
          //   // console.log(dom)
          // },
          axisPointer: {
            lineStyle: {
              width: 2,
              color: 'rgba(0,0,0,0.15)'
            }
          }
        },
        legend: {
          show: false
          // select: false
          // data: ['会议数量'],
          // right: 100,
          // top: -10,
          // icon: 'circle',
          // itemHeight: 8,
          // textStyle: {
          //   color: '#304EEC',
          //   fontSize: 14
          // }
        },
        grid: {
          left: '5%',
          right: '5%',
          // right: '0%',
          bottom: '10%',
          containLabel: true
        },
        // color: ['#019688', '#119AC2'],
        xAxis: [
          {
            axisLine: {
              show: false
            },
            axisLabel: { color: '#666666', align: 'center', interval: 0 },
            type: 'category',
            boundaryGap: false,
            data: this.yData,
            // axisLabel: {
            //   fontSize: 14
            // },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     width: 1,
            //     type: 'dashed',
            //     color: 'rgba(226,226,226,0.5)',
            //   },
            // },
            axisTick: {
              // 轴刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '浓度数据',
            // max: 10,
            nameLocation: 'end',
            // interval: 1,
            axisTick: {
              // 轴刻度线
              show: false
            },
            // 刻度文字颜色
            axisLabel: { color: '#666666', fontSize: 14 },
            // y轴刻度设置
            axisLine: {
              show: false
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                type: 'dashed',
                height: 1,
                color: '#ccc'
              }
            },
            // y轴分隔区域设置
            splitArea: {
              show: true,
              areaStyle: {
                color: ' #fff'
              }
            }
          }
        ],
        series: [
          {
            name: '会议数量',
            type: 'line',
            showSymbol: false,
            data: this.xData,
            smooth: true,
            symbolSize: 7,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#e7ebfd'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ])
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // // console.log(params)
                if (params.dataIndex === this.xData.length - 1) {
                  this.labelPosition = 'left'
                } else {
                  this.labelPosition = 'right'
                }
                var weeks = ['日', '一', '二', '三', '四', '五', '六']
                return '星期' + weeks[new Date(params.name).getDay()] + '\n' + params.seriesName + ':' + params.value
              },
              color: '#fff',
              position: this.labelPosition,
              backgroundColor: 'rgba(27,31,53,1)',
              padding: 20
              // formatter: '{b} \n{a}:{c}'
              // width: 106,
              // height: 52,
              // lineHeight: 26
              // rich: {
              //   a: {
              //     fontSize: 18
              //   },
              //   c: {
              //     fontSize: 18
              //   },
              //   b: {
              //     fontSize: 12
              //   }
              // }
            },
            itemStyle: {
              normal: {
                color: '#304eec',
                borderWidth: 4,
                borderColor: '#304eec',
                textStyle: {
                  fontSize: 14
                },
                lineStyle: {
                  width: 6,
                  shadowColor: 'rgba(48,78,236,0.09)',
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowOffsetY: 12,
                  color: {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0.07,
                        color: '#929aff' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: '#596bfd'
                      },
                      {
                        offset: 0.92,
                        color: '#929aff' // 100% 处的颜色
                      }
                    ],
                    global: false
                  }
                }
              }
            }
          }
        ]
      }
      this.myChartOne.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.testApp {
  height: 100%;
  padding: 16px 50px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 8px;
  .head {
    height: 64px;
    border-bottom: 1px solid #e6e9f0;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    .right{
      color: #304EEC;
      &::before{
        content: "";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background-color: #304EEC;
        margin-right: 8px;
      }
    }
  }
}
#myChart {
  min-height: 752px;
    // height: 100%;
    // height: calc(100% - 200px);
  //  width: 1632px;
}
</style>
